.cq-btn--s1n2 {
	.cq-btn--line {
		width: 60%;
		left: 20%;
		background-color: #fff;
		transform: translateY(-50%);
		transition: transform 0.3s 0.15s ease-out, width 0s 0.1s ease, transform 0.3s 0.15s ease-out;

		&:before {
			transform: translateY(-300%) rotate(0deg);
			transition: transform 0.5s 0s ease-out, width 0s 0.1s;
		}

		&:after {
			transform: translateY(300%) rotate(0deg);
			transition: transform 0.5s 0s ease-out, width 0s 0.1s;
		}
	}

	&.click {
		.cq-btn--line {
			width: 40%;
			transform: translateY(-50%) rotate(360deg);

			&:before {
				width: calc(100% * #{(1 + 1 / 3)});
				transform: translateY(-300%) rotate(0deg);
				transition: transform 0.5s 0s ease-out, width 0s 0.1s;
			}

			&:after {
				width: calc(100% * #{(1 + 1 / 3)});
				transform: translateY(300%) rotate(0deg);
				transition: transform 0.5s 0s ease-out, width 0s 0.1s;
			}
		}
	}

	&.is-reverse {
		border: none;
		background-color: transparent;

		.cq-btn--line {
			background-color: var(--color-icon);
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 0;
			width: 130%;
			height: 130%;
			border-radius: 100%;
			opacity: 0;
			transform: translate(-50%, -50%);
			transition: opacity 0.4s 0s ease;
		}

		&:hover {
			background-color: var(--theme-color);

			.cq-btn--line {
				background-color: #fff;
			}

			&:after {
				opacity: 1;
			}
		}
	}
}
